<template>
    <div class="image">
    <div class="picture">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3470573857,2085017330&fm=26&gp=0.jpg">
    </div>
    <div class="nick">
        <span>用户名：{{this.name}}</span>
        <div @click="buied"><span style="font-size:16px;color:orange;">历史订单</span></div>
    </div>
    
     <mt-button type="danger" size="large" @click="goback" class="btn">退出登录</mt-button>
    </div>
</template>
<script>
export default {
    data(){
    return{
        name:""
    }
    },
    methods: {
    goback () {
             window.localStorage.removeItem("userName");
             this.$router.push({name:"vip"})
        },
        buied(){
            this.$router.push({name:"history"})
        }

        
    },
    mounted() {
        this.name= window.localStorage.getItem('userName')
        console.log(this.name)
    },
}
</script>
<style lang="">
    .picture img {
        width: 376px;
    }
 .nick {
    height:50px ;
    width: 300px;
    border: 1px dashed #ccc;
    margin:15px  auto;
    border-radius: 20px;
   box-shadow: 10px 9px 10px #888888;
     text-align: center

}
.nick span {
    font-size: 26px;
     line-height: 50px;
}
.btn {
    margin-top: 50px
    
}
</style>